<template>
	<view>
		<view class="gift-layer flex jc ac" v-if="linkType == '109'">
			<view>
				<view class="bg-box" :style="{ 'background-image': 'url(' + dialogBgUrl + ')' }">
					<view class="box-content">
						<view class="item-list">
							<view class="item" v-for="(item, index) in list" :key="index">
								<view class="uni-flex uni-row">
									<view class="item-left uni-flex uni-column" v-if="item.couponType != 5">
										<view class="left-top uni-flex text-center jc">
											<view class="sign" v-if="item.couponType == 1 || item.couponType == 3">￥</view>
											<view class="count">{{ item.discount }}</view>
											<view class="sign" v-if="item.couponType == 2 || item.couponType == 4">折</view>
										</view>
										<view class="left-bottom uni-flex">
											<view class="f10 font-color line64" style="width: 100%;">{{ item.discountDetail }}</view>
										</view>
									</view>
									<view class="item-left uni-flex uni-column" v-else>
										<view class="left-top uni-flex"><view class="type-5" style="width: 100%;">立减</view></view>
										<view class="left-bottom uni-flex text-center">
											<view class="sign">￥</view>
											<view class="count">{{ item.discount }}</view>
										</view>
									</view>
									<view class="item-right uni-flex uni-column">
										<view class="right-top uni-flex">
											<view class="t-l">{{ item.couponTypeV }}</view>
											<view class="t-r">{{ item.scopeValue }}</view>
										</view>
										<view class="right-bottom uni-flex">
											<view class="f10 font-color line64" v-show="item.startTime != null || item.endTime != null">
												<span>{{ item.startTime }}</span>
												～
												<span>{{ item.endTime }}</span>
											</view>
											<view class="f10 font-color line64" v-show="item.startTime == null && item.endTime == null">
												领券后{{ item.usedValidDays || 'X' }}日内有效
											</view>
										</view>
									</view>
								</view>
								<view class="get-btn" v-if="item.receivedStatus == 1"><span class="text" @click="getGiftOnly(item)">领取</span></view>
								<view class="get-ready" v-if="item.receivedStatus == 2"><span class="text">已领取</span></view>
							</view>
						</view>
						<view class="get-gift" @click="getGiftAll" v-if="!allGet">一键领取</view>
					</view>
				</view>
				<view class="close-btn"><view class="close-img" @click="closeLayer"></view></view>
			</view>
		</view>

		<view v-if="linkType == '110'" class="activity-layer" @touchmove.stop.prevent="moveHandle">
			<view style="position: relative;">
				<image :src="dialogBgUrl" mode="widthFix" class="image" @click="jumpToActivity()"></image>
				<view class="close-btn"><view class="close-img" @click="closeLayer"></view></view>
			</view>
		</view>
		<view v-if="linkType == '120'" class="activity-layer" @touchmove.stop.prevent="moveHandle" @click="closeLayer">
			<view>
				<image :src="dialogBgUrl" mode="widthFix" class="private-image" @click="closeLayer"></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		giftList: {
			type: Array,
			default: []
		},
		dialogBgUrl: {
			type: String,
			default: ''
		},
		linkType: {
			type: String,
			default: ''
		},
		linkValue: {
			type: Number,
			default: ''
		},
		//来源模块在页面的排序序号
		moduleOrder: {
			type: [Number,String],
			default: 0
		}
	},
	created() {
		if (this.giftList && this.giftList.length > 0) {
			this.list = this.dealCouponList(this.giftList);
		}
		this.judgeAllGet();
	},
	data() {
		return {
			list: [], // 优惠券数据
			allGet: true // 优惠券全部领取后 值为false
		};
	},
	methods: {
		moveHandle() {},
		jumpToActivity() {
			var statInfo = {'Ref_Module_Type':this.linkType,'Ref_Module_ID':'1005','Ref_Module_Order':this.moduleOrder,'Ref_Module_Inner_Order':1}
			this.$utils.handleLink(this.linkType, this.linkValue,{},{statInfo:statInfo});
		},
		judgeAllGet: function() {
			this.allGet = true;
			if (this.list.length <= 0) {
				this.allGet = true;
				return;
			}
			this.list.forEach(item => {
				if (item.receivedStatus == 1) {
					this.allGet = false;
				}
			});
		},
		closeLayer: function() {
			this.$emit('closeLayer');
		},
		getGiftAll: function() {
			let tmp = [];
			this.list.forEach(item => {
				tmp.push(item.couponId);
			});
			let parJson = {
				couponIdList: tmp,
				receiveResource: 1
			};
			this.getGift(parJson, () => {
				this.list.forEach(item => {
					item.receivedStatus = 2;
					this.judgeAllGet();
				});
			});
		},
		getGiftOnly: function(data) {
			let tmp = [];
			tmp.push(data.couponId);
			let parJson = {
				couponIdList: tmp,
				receiveResource: 1
			};
			this.getGift(parJson, () => {
				data.receivedStatus = 2;
				this.judgeAllGet();
			});
		},
		getGift: function(parJson, callback) {
			this.$request('marketing/batchReceiveCoupon', parJson).then(data => {
				callback();
			});
		},
		dealCouponList(couponList) {
			var reg = new RegExp('-', 'g');
			for (var i = 0; i < couponList.length; i++) {
				try {
					couponList[i].startTime = couponList[i].startTime.substring(0, 10).replace(reg, '.');
					couponList[i].endTime = couponList[i].endTime.substring(0, 10).replace(reg, '.');
				} catch (e) {
					//TODO handle the exception
				}
				//使用范围 0-全部商品，1-指定商品，2-指定商品除外，3-指定分类，4-指定分类除外
				switch (couponList[i].scopeType) {
					case 0:
						couponList[i].scopeValue = '全部商品';
						break;
					case 1:
						couponList[i].scopeValue = '指定商品';
						break;
					case 2:
						couponList[i].scopeValue = '指定商品除外';
						break;
					case 3:
						couponList[i].scopeValue = '指定分类';
						break;
					case 4:
						couponList[i].scopeValue = '指定分类除外';
						break;
				}
				//优惠券类型:1-满额减，2-满额折，3-满件减，-4满件折，5-
				switch (couponList[i].couponType) {
					case 1:
						couponList[i].couponTypeV = '满额减';
						couponList[i].discount = couponList[i].discount / 100;
						couponList[i].discountDetail = '满' + couponList[i].condition / 100 + '元使用';
						break;
					case 2:
						couponList[i].couponTypeV = '满额折';
						couponList[i].discount = couponList[i].discount / 10;
						couponList[i].discountDetail = '满' + couponList[i].condition / 100 + '元使用';
						break;
					case 3:
						couponList[i].couponTypeV = '满件减';
						couponList[i].discount = couponList[i].discount / 100;
						couponList[i].discountDetail = '满' + couponList[i].condition + '件使用';
						break;
					case 4:
						couponList[i].couponTypeV = '满件折';
						couponList[i].discount = couponList[i].discount / 10;
						couponList[i].discountDetail = '满' + couponList[i].condition + '件使用';
						//couponList[i].discountDetail = '满' + couponList[i].condition / 100 + '-' + couponList[i].discount;
						break;
					case 5:
						couponList[i].couponTypeV = '立减';
						couponList[i].discount = couponList[i].discount / 100;
						couponList[i].discountDetail = '';
						break;
				}
			}
			return couponList;
		}
	}
};
</script>

<style lang="scss">
.text-center {
	text-align: center;
}
.line64 {
	line-height: 64rpx;
}
.f10 {
	font-size: 20rpx;
}
.f20 {
	font-size: 32rpx;
}
.f32 {
	font-size: 64rpx;
}
.font-color {
	color: #f35732;
}

.gift-layer {
	text-align: center;
	top: 0;
	right: 0;
	position: fixed;
	height: 100vh;
	width: 100%;
	z-index: 1000;
	.bg-box {
		// margin-top: 80rpx;
		// margin-left: 26rpx;
		width: 696rpx;
		height: 886rpx;
		//background: url("~@/static/img/giftLayer/gift_bg.png");
		background-size: 100% auto;
		background-repeat: no-repeat;
		.box-content {
			padding-top: 400rpx;
			// padding-left: 64rpx;
			// padding-right: 50rpx;
		}
		.item-list {
			max-height: 300rpx;
			overflow-y: auto;
			position: relative;
			text-align: center;
			.item {
				margin-bottom: 20rpx;
				display: inline-block;
				width: 528rpx;
				height: 140rpx;
				background: url('https://ss.migudm.cn/malleoc/img/giftLayer/gift_item.png');
				background-size: 100% 100%;
				.item-left {
					width: 126rpx;
					height: 130rpx;
					.left-top {
						// width: 100%;
						height: 50%;
						.sign {
							font-size: 20rpx;
							color: #f35732;
							line-height: 120rpx;
						}
						.count {
							font-size: 52rpx;
							color: #f35732;
							line-height: 100rpx;
						}
						.type-5 {
							font-size: 32rpx;
							color: #f35732;
							line-height: 90rpx;
						}
					}
					.left-bottom {
						// width: 100%;
						height: 50%;
						.sign {
							padding-left: 28rpx;
							font-size: 20rpx;
							color: #f35732;
							line-height: 90rpx;
						}
						.count {
							font-size: 52rpx;
							color: #f35732;
						}
					}
				}
				.item-right {
					width: 264rpx;
					height: 130rpx;
					padding-left: 20rpx;
					.right-top {
						width: 100%;
						height: 50%;
						font-size: 52rpx;
						color: #f35732;
						line-height: 100rpx;
						.t-r {
							margin-left: 20rpx;
						}
					}
					.right-bottom {
						width: 100%;
						height: 50%;
					}
				}
			}
			.item:last-child{
				margin-bottom: 0;
			}
			.get-ready {
				width: 144rpx;
				height: 40rpx;
				color: #f35732;
				float: right;
				margin-top: -84rpx;
			}
			.get-btn {
				width: 100rpx;
				height: 40rpx;
				float: right;
				margin-top: -84rpx;
				margin-right: 20rpx;
				background: #fdeeeb;
				border-radius: 22px;
				.text {
					color: #f35732;
					font-size: 26rpx;
					font-weight: 500;
				}
			}
		}
		.get-gift {
			display: inline-block;
			width: 528rpx;
			height: 72rpx;
			background: rgba(255, 239, 169, 1);
			border-radius: 8rpx;
			line-height: 72rpx;
			font-size: 32rpx;
			color: #f35732;
			margin-top: 30rpx;
		}
	}
}
.close-btn {
	height: 64rpx;
	margin-top: 22rpx;
	text-align: center;
	.close-img {
		display: inline-block;
		width: 64rpx;
		height: 100%;
		background: url('https://ss.migudm.cn/malleoc/img/giftLayer/gift_close.png');
		background-size: 100% 100%;
	}
}
.activity-layer {
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	.image {
		width: 520rpx;
	}
	.private-image{
		width: 560rpx;
		height: 762rpx;
	}
.close-btn {
			position: absolute;
			right: -32rpx;
			top: -32rpx;
			height: 64rpx;
			text-align: center;
			.close-img {
				display: inline-block;
				width: 64rpx;
				height: 100%;
				background: url('https://ss.migudm.cn/malleoc/img/giftLayer/gift_close.png');
				background-size: 100% 100%;
			}
		}		

}
</style>
